<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物档案管理</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/character.css' %}">
{#  {% load static %}  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>#}
{#    导出文件#}
    <script src="{% static 'js/xlsx.js' %}"></script>
</head>
<body>
    <!-- 添加与index相同的头部 -->
    <nav id="topnav">
        <div class="container">
            <ul class="nav-list">
                <li><a href="/polls/index/" class="nav-link">首页</a></li>
                <li><a href="/polls/dynasty/" class="nav-link">王朝</a></li>
                <li><a href="/polls/character/" class="nav-link">人物</a></li>
                <li class="user-menu">
                    <span>{{ stdata.std_name }}</span>
                    <a href="/polls/index/" onclick="goBack()" class="logout-btn">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="locate">
        <a href="#topnav" class="locate-link">
            <img src="{% static 'img/direct.svg' %}" alt="返回顶部">
{#            <span style="font-size: 20px;font-weight: bolder">∧</span>#}
            <span class="topup">顶部</span>
        </a>
    </div>
    <div class="container">
        <h1>人物档案管理</h1>

        <!-- 新增表单部分 -->
        <div class="form-section">
            <form action="{% url 'toCharacter' %}" method="post">
{#                url是直接进路由的name名称，#}
                {% csrf_token %}
                <div class="form-group">
                    <label>人物名称</label>
                    <input type="text" name="name" required>
                </div>
                <div class="form-group">
                    <label for="act_time">活动时间:</label>
                    <input type="text" id="act_time" name="act_time" required>
                </div>
                <div class="form-group">
                    <label for="background">人物背景:</label>
                    <input type="text" id="background" name="background" required>
                </div>
                <div class="form-group">
                    <label for="life">生平事迹:</label>
                    <input type="text" id="life" name="life" required>
                </div>
                <div class="form-group">
                    <label for="belief">思想主张:</label>
                    <input type="text" id="belief" name="belief" required>
                </div>
                <div class="form-group">
                    <label for="achievement">主要成就:</label>
                    <input type="text" id="achievement" name="achievement">
                </div>
                <div class="form-group">
                    <label for="evaluation">历史评价:</label>
                    <input type="text" id="evaluation" name="evaluation" required>
                </div>
                <div style="text-align: center;">
                    <input type="submit" name="action" value="新增">
                </div>
            </form>
        </div>

        <!-- 数据表格 -->
        <table id="myTable">
            <thead>
                <tr>
                    <th class="sortable">编号</th>
                    <th>人物</th>
                    <th class="sortable">活动时间</th>
                    <th>人物背景</th>
                    <th>生平事迹</th>
                    <th>主要思想</th>
                    <th>主要成就</th>
                    <th>历史评价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for data in datady %}
                <tr data-id="{{ data.id }}">
                    <td class="editable" contenteditable="false" data-field="id">{{ data.id }}</td>
                    <td class="editable" contenteditable="false" data-field="act_name">{{ data.act_name }}</td>
                    <td class="editable" contenteditable="false" data-field="act_time">{{ data.act_time }}</td>
                    <td class="editable" contenteditable="false" data-field="act_background">{{ data.act_background }}</td>
                    <td class="editable" contenteditable="false" data-field="act_life">{{ data.act_life }}</td>
                    <td class="editable" contenteditable="false" data-field="act_belief">{{ data.act_belief }}</td>
                    <td class="editable" contenteditable="false" data-field="act_achievement">{{ data.act_achievement }}</td>
                    <td class="editable" contenteditable="false" data-field="act_evaluation">{{ data.act_evaluation }}</td>
                    <td>
                        <div class="btn-group">
                            <button class="edit-btn">修改</button>
                            <button class="save-btn">保存</button>
                            <a href="{% url 'character_delete' data.id %}" class="delete-btn">删除</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
{#    导出表格#}
        <button onclick="exportToExcel()">导出表格</button>
{#    查看姓氏图#}
        <button id="showChartBtn"><a href="/polls/chart/">查看姓氏统计图</a></button>
    </div>
{#    修改#}
    <script src="{% static 'js/character.js' %}"></script>
{#    导出文件#}
    <script src="{% static 'js/xlsxboxCh.js' %}"></script>
{#    排序#}
    <script src="{% static 'js/sort.js' %}"></script>
</body>
</html>